<template>
    <div class="pay">
        <div class="content">
            <div class="top">
                <i @click="gotoHome" class="iconfont icon-icon2"></i>
                <span>支付</span>
            </div>
            <div class="detail">
                <div class="detail_money">
                    <span>车费</span>
                    <span>共<b>{{orderCost.order_amount}}</b>元</span>
                    <span @click="orderCostDetail">查看明细</span>
                </div>
                <div class="detail_coupon">
                    <em>代金券抵扣</em>
                    <em>{{orderCost.coupon[0]?orderCost.coupon[0].amount:0}}元&nbsp;></em>
                </div>
            </div>
            <div class="payType">
                <div>
                    <div class="l">
                        <i class="iconfont icon-qianbao"></i>
                            <span>我的钱包[余额{{myInfo.amount}}元]</span>
                    </div>
                    <div>{{orderCost.order_amount-(orderCost.coupon[0]||0)<=myInfo.amount?orderCost.order_amount-(orderCost.coupon[0]||0):myInfo.amount}}</div>
                </div>
                <!-- <div @click="payType=1">
                    <div class="l">
                        <i class="iconfont icon-zhifubao"></i>
                            <span>支付宝支付</span>
                    </div>
                    <i v-if="payType==1" class="iconfont icon-duigou"></i>
                    <i v-else class="iconfont icon-yuanquan"></i>
                </div> -->
                <div @click="payType=2">
                    <div class="l">
                        <i class="iconfont icon-weixinzhifu1"></i>
                            <span>微信支付</span>
                    </div>
                    <i v-if="payType==2" class="iconfont icon-duigou"></i>
                    <i v-else class="iconfont icon-yuanquan"></i>
                </div>
            </div>

             <div class="pay_btn" @click="pay"><ibutton>确认支付{{orderCost.order_amount-(orderCost.coupon[0]||0)<=myInfo.amount?orderCost.order_amount-(orderCost.coupon[0]||0):myInfo.amount}}元</ibutton></div> 
        </div>
    
        <div class="shadow"></div>
    </div>
</template>

<script>
    import ibutton from '@/components/common/ibutton'
    import {mapGetters} from 'vuex'
    import {getPayType,getMyInfo,paySubmit} from '@/http'
    export default {
        name:'pay',
        data(){
            return {
                payType:2, //1=支付宝 2=微信 6=余额
                orderCost:{
                    "id": 754,
                    "user_id": "47",
                    "driver_id": "42",
                    "SN": "201708231412137453",
                    "order_time": "1503468733",
                    "order_amount": "7.00",
                    "status": "5",
                    "order_type": "1",
                    "extra_fee": null,
                    "pure_fee": "7.0000",
                    "pay_type": {
                        "wxpay": 1,
                        "alipay": 1,
                        "cashpay": 1,
                        "unionpay": 0,
                        "remain": 1
                    },
                    "coupon": []
                },
                wxpay:{
                        appId:'',     //公众号名称，由商户传入     
                        timeStamp:'',         //时间戳，自1970年以来的秒数     
                        nonceStr:'', //随机串     
                        package:'',     
                        paySign:'', //微信签名 
                        "signType":"MD5", //微信签名方式： 
                }
            }
        },
        components:{ibutton},
        computed:{
            ...mapGetters(['curOrder','cookie','myInfo','login_info'])
        },
        methods:{
            onBridgeReady(){
                   WeixinJSBridge.invoke(
                    'getBrandWCPayRequest', 
                    {
                        appId:this.wxpay.appId,     //公众号名称，由商户传入     
                        timeStamp:this.wxpay.timeStamp, //时间戳，自1970年以来的秒数     
                        nonceStr:this.wxpay.nonceStr, //随机串     
                        package:this.wxpay.package,     
                        paySign:this.wxpay.paySign, //微信签名 
                        "signType":"MD5", //微信签名方式：   
                    },
                    (res)=>{     
                        if(res.err_msg == "get_brand_wcpay_request:ok" ) {
                            // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。 
                            this.$store.dispatch('switchTravel','paySuccess')
                        }
                    }
                );
            },
            pay(){
                // 调用支付
                let order_id = this.orderCost.id;
                let pay_coupon = this.orderCost.coupon[0]?this.orderCost.coupon[0].id:null;
                let wx_mp_id = this.cookie.wx_mp_id;//'oQGXgwQXbDJoOPJZEfX97OL_Z3ng';
                paySubmit({order_id,pay_coupon,wx_mp_id}).then((data)=>{
                    // this.$msgBox({
                    //     title: '提示',
                    //     message: data.msg,
                    //     showCancelButton: true
                    //     })
                    if(data.code == 0){  //获取成功
                        // 成功后调用相应的支付接口付款,成功后跳转到paySuccess界面
                        this.wxpay = data.data.wxpay;
                        if (typeof WeixinJSBridge == "undefined"){
                            if( document.addEventListener){
                                    document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady, false);
                                }else if (document.attachEvent){
                                    document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady); 
                                    document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady);
                                }
                            }else{
                                this.onBridgeReady();
                            } 

                    }else if(data.code == 1){  //失败
                        console.log(data.msg)
                    }
                })
            },
            gotoHome(){
                this.$store.dispatch('switchTravel','selectAddr')
            },
            getPayType(){
                let user_id = this.login_info.user_id;
                let order_id = this.curOrder.id;
                getPayType({user_id,order_id}).then((data)=>{
                    this.orderCost = data.data
                })
            },
            orderCostDetail(){

            }
        },
        mounted(){
            this.getPayType();
            if(this.myInfo==''){
                getMyInfo().then((data)=>{
                    this.$store.dispatch('myInfo',data.data)
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import '../../../../style/var.scss';

    .pay{
        position: fixed;
        top:0;
        left:0;
        z-index:999;
        width:100%;
        height:100%;

        b{font-size: 30px;}
        em{color:$primary;font-size: 16px;}
        .icon-duigou{color:rgb(255,102,51);}
        
        .content{
            position: absolute;
            bottom:0;
            background:#fff;
            width:100%;
            height:80%;
        }
        .top{
            position: relative;
            text-align: center;
            font-size: 18px;
            padding:50px;
            border-bottom:1px solid $border_base;
            i{
                position: absolute;
                left:50px;
            }
        }
        .detail{
            border-bottom:1px solid $border_base;
        }
        .detail_money{
            display: flex;
            align-items: center;
            flex-direction: column;
            padding:50px;
        }
        .detail_coupon{
            display: flex;
            align-items: center;
            justify-content: space-around;
            padding-bottom:50px;
        }
        .payType{
            padding:50px 150px;
            >div{
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding:35px;
                &:first-child{
                    border-bottom:1px solid $border_base;
                }
            }
            .l{
                display: flex;
                align-items: center;
            }
        }
        .pay_btn{
            position: absolute;
            bottom:0;
            width:100%;
            padding:50px;
        }

        .shadow{
            position: absolute;
            z-index: -1;
            top:0;
            left:0;
            width:100%;
            height:100%;
            background:rgba(0,0,0,.4);

        }
    }

    .test{
        position: fixed;
        top:0;
        left:0;
        width:100%;
        height:50%;
        background:rgba(0,0,0,.4);
        color:#fff;
        word-break: break-all;
    }
</style>
